<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css">
    <script src="/assets/libs/layui/layui.js"></script>
    <style>
        .password-form {
            margin: 50px auto;
            max-width: 500px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }
        .layui-icon.admin-tabs-control {
            display: none !important;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="password-form">
        <h2 class="layui-text layui-text-center" style="margin-bottom: 20px;">修改密码</h2>
        <form class="layui-form" lay-filter="passwordForm" id="passwordForm">
            <!-- 旧密码 -->
            <div class="layui-form-item">
                <label class="layui-form-label">旧密码</label>
                <div class="layui-input-block">
                    <input type="password" name="oldPassword" required lay-verify="required" placeholder="请输入旧密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <!-- 新密码 -->
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="newPassword" required lay-verify="required|password" placeholder="请输入新密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <!-- 确认新密码 -->
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="confirmPassword" required lay-verify="required|confirmPass" placeholder="请确认新密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="submitPasswordForm">确认修改</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        var layer = layui.layer;

        // 自定义表单验证规则
        form.verify({
            password: [/^[\S]{6,16}$/, '密码必须6到16位，且不能包含空格'],
            confirmPass: function (value) {
                var newPassword = document.querySelector('input[name="newPassword"]').value;
                if (value !== newPassword) {
                    return '两次输入的密码不一致';
                }
            }
        });

        // 监听表单提交
        form.on('submit(submitPasswordForm)', function (data) {
            var formData = data.field; // 获取表单数据

            // 发送Ajax请求到后端修改密码
            fetch('/user/changePassword', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    oldPassword: formData.oldPassword,
                    newPassword: formData.newPassword
                })
            }).then(response => response.json())
                .then(result => {
                    if (result.code === 0) {
                        layer.msg('密码修改成功！', {icon: 1, time: 1500}, function () {
                            // 密码修改成功后，自动跳转到登录页面或刷新
                            window.location.href = '/login';
                        });
                    } else {
                        layer.msg(result.msg || '密码修改失败，请重试', {icon: 2});
                    }
                })
                .catch(error => {
                    console.error('修改密码失败:', error);
                    layer.msg('密码修改失败，请稍后重试', {icon: 2});
                });

            return false; // 阻止表单默认提交
        });
    });
</script>
</body>
</html>
